
{% extends 'news/base_login.html' %}
{% load staticfiles %}
{% block title %}用户{{ user.nickname }}的主页{% endblock %}
{% block css %}
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'news/css/base_login.css' %}" charset="utf-8">
<link rel="stylesheet" type="text/css" href="{% static 'news/css/bootstrap.min.css' %}">
<!--<link rel="stylesheet" type="text/css" href="{% static 'news/article.css' %}">-->
{% endblock %}
{% block content %}
{% block content_login %}
<div id="i1">
    <div id="i2">
        <div id="i3"><img id='m1' src="{{user.portrait}}"/></div>
        <div id="i4">{{ user.nickname }}小兔子乖乖</div>
        <img id="m2" src="{% static 'news/images/5.png' %}"/>
        <img id="m3" src="{% static 'news/images/6.png' %}"/>
        <div id="i5">剩余积分</div>
        <div id="i6">{{ user.integral }}</div>
        <div id="i7"></div>
        <div id="i8">剩余发布次数</div>
        <div id="i9">{{ user.number }}</div>
    </div>
    <div id="i11" >
        <div id="i12" class="c"><img src="{% static 'news/images/my_vip.png' %}"/></div>
        <div id="i13"><a href="{% url 'news:my_vip' %}" style="text-decoration:none; color:black;">我的会员</a></div>
    </div>
    <div id="i14" >
        <div id="i15" class="c"><img src="{% static 'news/images/my_jf.png' %}"/></div>
        <div id="i16"><a href="{% url 'news:my_integral'%}" style="text-decoration:none; color:black;">我的积分</a></div>
    </div>
    <div id="i17">
        <div id="i18" class="c"><img src="{% static 'news/images/post_n.png' %}"/></div>
        <div id="i19"><a href="{% url 'news:mypublish' %}" style="text-decoration:none; color:black;">我的发布</a></div>
    </div>
    <div id="i20" >
        <div id="i21" class="c"><img src="{% static 'news/images/xxx_n.png' %}"/></div>
        <div id="i22" style="text-decoration:none;"><a href="{% url 'news:my_message' %}" style="text-decoration:none; color:black;">消息通知</a></div>
    </div>

    <div id="i23">
        <div id="i24"></div>
        <div id="i25"><img src="{% static 'news/images/sz.png' %}"/></div>
        <div id="i26" style="font-size: 18px;
        position: absolute;
        top: 18px;
        left: 59px;
        height: 25px">设置</div>
		<div id="i27"><img src="{% static 'news/images/xia.png' %}"/></div>
	</div>
	<div id="i28" style="list-style:none; position: absolute; top: 505px; left: 0px;">
		<ul>
			<p id="i29"><a href="{% url 'news:user_index' %}" style="text-decoration:none; color:black;">个人资料</a></p>
			<p><a href="{% url 'news:alert_pwd_1' %}" style="text-decoration:none; color:black;">修改密码</a></p>
			<a href="{% url 'news:user_logout' %}" style="text-decoration:none; color:black">退出登录</a>
		</ul>
	</div>


    <!--<div id="i29" style="position: absolute;top:0;left: 320px;width: 100px;height: 100px;">我的发布</div>-->

</div>
<div class="form1">
    <form action="" class="form-horizontal" method="post">
        {% csrf_token %}
        <div class="form-group form-group-lg">
            <div class="ipt" style="margin-top: 100px; margin-left: 730px; width: 420px;">
                <input type="password" class="form-control" name="password" id="pwd" placeholder="请输入新的密码">
            </div>
        </div>
        <div class="form-group form-group-lg">
            <div class="ipt" style=" margin-left: 730px; width: 420px;">
                <input type="password" class="form-control" name="password1" id="r_pwd" placeholder="请再次输入密码">
            </div>
        </div>
        <br>
        <div class="ipt" style="margin-left: 714px; width: 420px;">
            <input type="submit" class="btn btn-primary btn-lg btn-block " value="完成">
        </div>
    </form>
</div>
 <script type="text/javascript" src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
<!--i27是设置栏右边的下拉小图标点击旋转或恢复-->
	$(function() {
		  var r = 0;
		  $('#i23').click(function() {
			r += 90;
			$("#i27").css('transform', 'rotate(' + r + 'deg)');
			if(r > 90){r = 0;
				$("#i27").css('transform', 'rotate(' + 0 + 'deg)');
			}
		  });
		});

<!--i23是设置栏，i28是下拉菜单栏-->
	$("#i23").click(function(){
		 $("#i28").toggle();
		 })



</script>

{% endblock %}
{% endblock %}